<template>
  <div id="tabbar">
    <van-tabbar v-model="currentSelected">
      <van-tabbar-item name="biji" icon="search">笔记</van-tabbar-item>
      <van-tabbar-item name="zhangdan" icon="search">账单</van-tabbar-item>
      <van-tabbar-item name="fenxi" icon="search">分析</van-tabbar-item>
      <van-tabbar-item name="wode" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "Tabbar",
  data() {
    return {
      currentSelected: this.selected,
    };
  },
  props: {
    selected: String,
    tabs: Array,
  },
  watch: {
    currentSelected: function (val, oldVal) {
      // alert(val + ":" + oldVal);
      switch (val) {
        case "biji":
          this.$router.push("/biji");
          break;
        case "zhangdan":
          this.$router.push("/zhangdan");
          break;
        case "fenxi":
          this.$router.push("/fenxi");
          break;
        case "wode":
          this.$router.push("/wode");
          break;
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
#tabbar {
  height: 50px;

  svg {
    width: 2em;
    height: 2em;
    vertical-align: 0.85em;
  }
}
</style>
